import React, { useRef } from 'react'
import { Tabs, theme } from 'antd'
import Commodity from './commodity/index'
import ShoppingMan from './shoppingMan/index'

const App = () => {
  const ShoppingManRef = useRef(null)
  let tablsList = [
    {
      tableTitle: '周边商品管理',
      view: <ShoppingMan ref={ShoppingManRef} />
    },
    {
      tableTitle: '周边订单管理',
      view: <Commodity />
    }
  ]
  const items = tablsList.map((item, i) => {
    return {
      label: item.tableTitle,
      key: i,
      children: item.view,
      style:
        i === 0
          ? {
              height: 200
            }
          : undefined
    }
  })
  const {
    token: { colorBgContainer }
  } = theme.useToken()
  const changeFn = (data) => {
    if (data == 0) {
      ShoppingManRef.current.handleChildMethod()
    }
  }
  const renderTabBar = (props, DefaultTabBar) => (
    <DefaultTabBar
      {...props}
      style={{
        background: colorBgContainer
      }}
    />
  )
  return (
    <Tabs
      defaultActiveKey="1"
      onChange={changeFn}
      renderTabBar={renderTabBar}
      items={items}
    />
  )
}
export default App
